<template>
    <div>
  显示消息：{{mes}}
    <!-- <el-input v-model='sendsms'></el-input>
    <el-button @click='send'>submit</el-button> -->
      <div class="table-box">
    <van-row class="th-row">
      <van-col :span="24/dataList.title.length" v-for="warn in dataList.title" :key="warn">
        {{warn}}
      </van-col> 
    </van-row>
    <van-row class="tb-row" v-for="(wb,index) in mes" :key="index" 
    :style="{background:wb.status === 1 ?'#fff':'#FF0000'}">
     <van-col :span="24/Object.keys(wb).length" v-for="item in Object.keys(wb)" :key="item">{{wb[item]}} </van-col>
    </van-row>
  
  </div>
  
    </div>
  </template>
  
  <script>
  export default{
      data(){
          return{
  
              dataList:{
              title:['id','名字','最小温度','最大温度','状态','当前温度']
            
            },
          mes:[],
          ws:'',
          sendsms:'',
          color:'red'
          }
      },
      methods:{
        initWeb(){
          this.ws = new WebSocket("ws://localhost:8000/web?id=1")
          this.ws.onopen = function(){
            alert('success')
          }
          this.ws.onmessage=(data)=>{
            this.mes = JSON.parse(data.data) 
          }
          this.ws.onclose=function(){
            alert('close')
          }
        },
      send(){
        this.axios.get('/tt?id=1')
      }
          
      },
    mounted(){
      this.initWeb()
      this.send()
    }
  }
  
  </script>
  
  <style>
  .table-box{
     margin: 12px 0px;
     .th-row{
       height: 56px;
       line-height: 56px;
       background: #EBF1F7;
       padding: 0px 12px;
     }
     .tb-row{
       height: 56px;
       line-height: 56px;
       padding: 0px 12px;
     }
   }
  
  
  </style>